<template>
  <div>
    <Modal
      title="创建课程"
      v-model="courseModal"
      :closable="false"
      :mask-closable="false">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
        <FormItem label="学科名称" prop="subject">
          <Input size="large" v-model="formValidate.subject" placeholder="请填写学科名称" />
        </FormItem>
        <FormItem label="教材名称" prop="textbooks">
          <Input size="large" v-model="formValidate.textbooks" placeholder="请填写教材名称" />
        </FormItem>
        <FormItem label="课程名称" prop="course">
          <Input size="large" v-model="formValidate.course" placeholder="请填写课程名称" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="handleReset('formValidate')" v-if="!btnLoading">取消</Button>
        <Button type="success" :loading="btnLoading" @click="handleSubmit('formValidate')" icon="ios-paperplane">创建</Button>
      </div>
    </Modal>
    <Card style="width:100%" class="has-btn-card right-btn-card" dis-hover>
      <p slot="title">
        <span>班级列表</span>
        <span class="card-left-action active">我的班级</span>
        <span class="card-left-action">全校班级</span>
      </p>
      <div slot="extra">
        <Button type="text" icon="plus" @click="courseModal = true">加入班级</Button>
        <Button type="text" icon="plus" @click="courseModal = true">创建班级</Button>
      </div>

      <Table :columns="columns1" :data="data1"></Table>
      <div class="page-component">
        <Page :total="100"></Page>
      </div>
    </Card>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        courseModal: false,
        btnLoading: false,
        formValidate: {
          subject: '',
          textbooks: '',
          course: ''
        },
        ruleValidate: {
          subject: [{required: true, message: '请填写学科名称', trigger: 'blur'}],
          textbooks: [{required: true, message: '请填写教材名称', trigger: 'blur'}],
          course: [{required: true, message: '请填写课程名称', trigger: 'blur'}]
        },
        columns1: [
          {
            title: '班级名称',
            key: 'name',
          },
          {
            title: '班级编号',
            key: 'age'
          },
          {
            title: '教师(人)',
            align: 'center',
            key: 'created'
          },
          {
            title: '学生(人)',
            align: 'center',
            key: 'endAd'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 100,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$router.push({path: '/prepareLessons'})
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        data1: [
          {
            name: '葛二蛋',
            age: 'NH1288328',
            created: '3',
            endAd: '20'
          }
        ]
      }
    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.btnLoading  = true
            this.$Message.success('Success!');
          }
        })
      },
      handleReset (name) {
        this.courseModal = false
        this.btnLoading  = false
        this.$refs[name].resetFields()
      }
    }
  }
</script>
